<template>
	<div id="app">
		<loading :isShow="showOrNot" @nextPage="onNextPage" />
		<page-kv :isShow="showOrNot" @nextPage="onNextPage" />
		<page-one :isShow="showOrNot" @playAudio="onPlayAudio" @nextPage="onNextPage" @sendImg="onSendImg" @sendResult="onSendResult"
		 :name="nickname" />
		<page-two :isShow="showOrNot" @nextPage="onNextPage" :poster="gotPoster" :result="gotResult" :name="nickname" />
		<music-player />
		<wx-share :shareTitle="title" :shareDesc="desc" :shareImg="thumbImg" :shareLink="link" :shr="reShare" />
		<rotate-it />

		<!-- 音频 -->
		<div class="audio-wp">
			<audio :src="m1" class="m1" preload="auto"></audio>
			<audio :src="m2" class="m2" preload="auto"></audio>
			<audio :src="m3" class="m3" preload="auto"></audio>
			<audio :src="m4" class="m4" preload="auto"></audio>
			<audio :src="m5" class="m5" preload="auto"></audio>
			<audio :src="m6" class="m6" preload="auto"></audio>
			<audio :src="m7" class="m7" preload="auto"></audio>
			<audio :src="m8" class="m8" preload="auto"></audio>
			<audio :src="m9" class="m9" preload="auto"></audio>
		</div>
	</div>
</template>

<script>
	import Rotate from './components/rotate/Rotate'
	import MusicPlayer from './components/musicplayer/music-player'
	import Loading from './pages/loading/loading'
	import PageKV from './pages/page-kv/pageKV'
	import PageOne from './pages/page-one/pageOne'
	import PageTwo from './pages/page-two/pageTwo'
	import WxShare from './components/wxShare/wxShare';
	import {
		postData
	} from './assets/util';

	export default {
		name: 'app',
		components: {
			Loading,
			'rotate-it': Rotate,
			'music-player': MusicPlayer,
			'page-one': PageOne,
			'page-two': PageTwo,
			'page-kv': PageKV,
			'wx-share': WxShare
		},
		data() {
			return {
				showOrNot: {
					isLDShow: true,
					isKVShow: false,
					isPOShow: false,
					isPTShow: false
				},
				title: '飞花令打榜活动，欢迎来战',
				desc: '春天“飞花令”，你敢来对令吗 ？',
				thumbImg: 'https://www.jiandoukeji.com/h5/h5-effects/poem-course/common/thumb.jpg',
				link: '',
				gotPoster: null,
				gotResult: 1,
				nickname: '',
				reShare: false,
				m1: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频1.mp3',
				// m1: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/晨间清脆的鸟叫声.mp3',
				m2: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频2.mp3',
				m3: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频3.mp3',
				m4: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频4.mp3',
				m5: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频5.mp3',
				m6: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频6.mp3',
				m7: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频7.mp3',
				m8: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频8.mp3',
				m9: 'https://7463-tcb-0vhvzzpu8c8507-7dax6e5d41733-1306284875.tcb.qcloud.la/音频9.mp3',
			}
		},
		created() {
			this.request();
		},
		mounted() {
			this.autoPlay();
		},
		methods: {
			async request() {
				const URL = '';
				const authURL = '';
				try {
					const authed = await postData(URL);
					if (authed.status === 1) {
						const {
							nickname
						} = authed.data;
						this.nickname = nickname;
					} else {
						window.location.href = authURL;
					}
				} catch (error) {
					console.log(error);
				}
			},
			onPlayAudio(para) {
				this.audioPlay(para);
			},
			autoPlay() {
				const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
				data.map(item => {
					let audio = document.querySelector(`.m${item}`);
					audio.volume = 0.1;
					audio.play();
					document.addEventListener('WeixinJSBridgeReady', function() {
						audio.play();
					}, false)
					setTimeout(() => {
						audio.pause()
						document.addEventListener('WeixinJSBridgeReady', function() {
							audio.pause()
						}, false)
						audio.volume = 1;
					}, 20);
				});
			},
			audioPlay(m) {
				const selector = `.m${m}`;
				let audio = document.querySelector(selector);
				audio.play()
				document.addEventListener('WeixinJSBridgeReady', function() {
					audio.play();
				}, false)
			},
			onSendResult(para) {
				this.gotResult = para;
				switch (para) {
					case 1:
						this.title = `${this.nickname}在飞花令打榜活动中获得状元，欢迎来战！`;
						break;
					case 2:
						this.title = `${this.nickname}在飞花令打榜活动中获得榜眼，欢迎来战！`;
						break;
					case 3:
						this.title = `${this.nickname}在飞花令打榜活动中获得探花，欢迎来战！`;
						break;
					case 4:
						this.title = `${this.nickname}在飞花令打榜活动中获得进士，欢迎来战！`;
						break;
					default:
						return '';
				}
				this.reShare = true;
			},
			onSendImg(para) {
				this.gotPoster = para;
			},
			onNextPage(para) {
				Object.keys(this.showOrNot).map(item => {
					this.showOrNot[item] = false
				})
				this.showOrNot[para] = true;
			}
		}
	}
</script>

<style>
	@import './assets/reset.less';

	@font-face {
		font-family: font-kt;
		src: url('/h5/h5-effects/poem-course/common/font-kt.ttf');
	}

	#app {
		width: 100%;
		height: 100%;
		min-width: 320px;
		max-width: 540px;
	}

	canvas {
		width: 100%;
		height: 100%;
	}
</style>
